<template>
  <div class="home">
    <!-- 存放search二级的槽 -->
    <router-view v-if="$route.path=='/home/search'"></router-view>
    <div v-else>
      <!-- 搜索框 -->
      <van-search shape='round' v-model="value" placeholder="请输入搜索关键词" @focus='$router.push("/home/search")' />
      <!-- 轮播图 -->
      <Swipe :bannerArr='bannerArr'></Swipe>
      <!-- grid -->
      <Grid :channelArr="channelArr"></Grid>
      <!-- 品牌制造商 -->
      <div class="brand">
        <h3>品牌制造商直供</h3>
          <ul>
            <li v-for="item in brandList" :key="item.id">
            <img v-lazy="item.pic_url"/>
            <div class="tit">
              <p>{{ item.name }}</p>
              <p>{{ item.floor_price | Rmb }}</p>
            </div>
          </li>
        </ul>
      </div>
      <!-- 新品首发 -->
      <div class="Goods">
        <h3>新品首发</h3>
          <HomeList v-if='GoodsList.length!=0' :GoodsList='GoodsList'></HomeList>
      </div>
      <!-- 人气推荐 -->
      <div class="hot">
        <h3>人气推荐</h3>
          <van-card 
            v-for="item in hotGoodsList" 
            :key='item.id'
            :price="item.retail_price | Rmb1"
            :desc="item.goods_brief"
            :title="item.name"
            :thumb="item.list_pic_url"
          />
      </div>
      <!-- 分类 -->
      <div class="Goods" v-for="(item) in KindList" :key='item.id'>
        <h3>{{item.name}}</h3>
        <HomeList v-if='GoodsList.length!=0' :GoodsList='item.goodsList'></HomeList>
      </div>
    </div>
  </div>
</template>

<script>
import {getIndexDate} from '@/utils/http'
import Grid from '@/components/Grid.vue'
import Swipe from '@/components/Swipe.vue'
import HomeList from '@/components/HomeList.vue'

export default {
    name:'Home',
    // eslint-disable-next-line vue/no-unused-components
    components: { Swipe, Grid, HomeList },
    data() {
      return {
        value:'',
        bannerArr:[], //轮播图
        channelArr:[], //宫格导航
        brandList:[], //制造商
        GoodsList:[], //新品首发
        hotGoodsList:[], // 人气推荐
        topicList:[], // 主题
        KindList:[], // 首页类别数据 .goodsList是数据
      }
    },
    created(){
      // 获取首页数据
      getIndexDate().then(res=>{
        this.bannerArr = res.data.banner
        this.channelArr =res.data.channel
        this.brandList =res.data.brandList
        this.GoodsList =res.data.newGoodsList
        this.newGoodsList =res.data.newGoodsList
        this.KindList = res.data.categoryList
        this.hotGoodsList = res.data.hotGoodsList
      })
    },
    methods:{
      
    }
}
</script>

<style lang='less' scope>
.home{
  padding-bottom: 50px;
}
// 品牌制造商
.brand {
  h3{
    font-size: 18px;
    text-align: center;
    padding: 20px 0 10px;
    font-weight: 500;
    }
  ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li {
    width: 49%;
    margin-bottom: 10px;
    position: relative;
    img {
      width: 100%;
      display: block;
    }
  }
  .tit{
    position: absolute;
    top: 20px;
    left: 10px;
    p:first-child{
      margin-bottom: 10px;
      font-size: 16px;
    }
    p:last-child{
      color: rgb(116, 82, 20);
      font-weight: 500;
      font-size: 15px;
    }
  }
  }
}

// 新品首发
.Goods{
  h3{
    font-size: 18px;
    text-align: center;
    padding: 20px 0 10px;
    font-weight: 500;
    }
  ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  li {
    width: 49%;
    margin-bottom: 10px;
    img {
      width: 100%;
      display: block;
    }
  }
  .tit{
    top: 20px;
    left: 10px;
    p{
      text-align: center;
    }
    p:first-child{
      margin-bottom: 10px;
      font-size: 16px;
    }
    p:last-child{
      color: rgb(116, 82, 20);
      font-weight: 500;
      font-size: 15px;
    }
  }
  }
}
// 人气推荐
.hot{
  h3{
    font-size: 18px;
    text-align: center;
    padding: 20px 0 10px;
    font-weight: 500;
    }
    .van-card__content{
      div{
        margin: 5px;
        font-size: 16px;
        .van-card__title{
          font-weight: 600;
          margin-bottom: 15px;
          font-size: 18px;
        }
      }
    }
}

 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>